<template>
    <div class="chartBox">
        <div class="tabBox">
            <span :class="{'selected':tabIndex==1}" @click="setTab(1)"  v-t="'detail.title7'">Daily Trend</span>
            <span :class="{'selected':tabIndex==2}" @click="setTab(2)"  v-t="'detail.title8'">Weekly Trend</span>
            <span :class="{'selected':tabIndex==3}" @click="setTab(3)"  v-t="'detail.title9'">Monthly Trend</span>
        </div>
        <div class="jlffqs" :id="id"></div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import * as echarts from 'echarts';
import { useI18n } from 'vue-i18n'

export default {
    components:{
       
    },
    props:{
        id:{  // echart容器id
            type:String,
            default:'jlffqs'
        },
        objectId:''
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            tabIndex:1,
            xAxis_data:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            series_data:[5, 20, 36, 10, 14, 20,9, 39, 11, 5, 8, 16],
            dayDataObj:{xAxis_data:[],series_data:[]}, // 
            monthDataObj:{xAxis_data:[],series_data:[]},
            weekDataObj:{xAxis_data:[],series_data:[]}
        })

        onMounted(()=>{
            rewardDistributionTrend()
        })
        const setTab = (index)=>{
            state.tabIndex = index
            getChart()
        }
        const rewardDistributionTrend = async ()=>{
            const res = await store.dispatch('ad/reward_distribution_trend',{
                // adPlaceJobRecordId:props.objectId,
                adPlaceJobId:props.objectId,
                walletAddress:state.userInfo.walletAddress
            })
            if(res.success){
                let list = res.data.dayTrendList ||[]
                list.forEach(item => {
                    state.dayDataObj.xAxis_data.push(item.timeName.substr(item.timeName.length-2,2)+':00') // 发放时间，
                    state.dayDataObj.series_data.push(item.awardBonus.num) // 发放金额
                });
                let list1 = res.data.weekTrendList ||[]
                list1.forEach(item => {
                    state.weekDataObj.xAxis_data.push(item.timeName) // 发放时间，
                    state.weekDataObj.series_data.push(item.awardBonus.num) // 发放金额
                });
                let list2 = res.data.monthTrendList ||[]
                list2.forEach(item => {
                    state.monthDataObj.xAxis_data.push(item.timeName) // 发放时间，
                    state.monthDataObj.series_data.push(item.awardBonus.num) // 发放金额
                });
                
                // console.log('dayDataObj',state.dayDataObj)
                // console.log('monthDataObj',state.monthDataObj)
                // console.log('weekDataObj',state.weekDataObj)
                getChart()
            }
            
        }
        const getChart =()=>{
            if(state.tabIndex==1){
                state.xAxis_data = state.dayDataObj.xAxis_data
                state.series_data = state.dayDataObj.series_data
            }else if(state.tabIndex==2){
                state.xAxis_data = state.weekDataObj.xAxis_data
                state.series_data = state.weekDataObj.series_data
            }else if(state.tabIndex==3){
                state.xAxis_data = state.monthDataObj.xAxis_data
                state.series_data = state.monthDataObj.series_data
            }
            createChart()
        }

        const createChart = ()=>{
            let myChart = echarts.getInstanceByDom(document.getElementById(props.id))
            // 如果不存在，就进行初始化
            if (myChart == null) {
                // 基于准备好的dom，初始化echarts实例
                myChart = echarts.init(document.getElementById(props.id));
            }
            // 绘制图表
            myChart.setOption({
                tooltip: {},
                // legend: {
                //     bottom:0,
                //     textStyle:{color:'#fff'},
                //     data: ['UV', 'PV']
                // },
                grid: { // 设置图形四周留白大小
                    left: '40px',
                    right: '20px',
                    bottom: '20px',
                    top:'20px'
                },
                xAxis: {
                    axisLabel:{
                        show: true, 
                        textStyle:{color:'#fff',fontSize:'8px'},
                    },
                    data:state.xAxis_data
                },
                yAxis: {
                    axisLabel:{
                        show: true, 
                        textStyle:{color:'#fff',fontSize:'8px'},
                    },
                    type:'value',
                    splitLine: {
                        show: true,
                        lineStyle:{
                            type:'dashed',
                            color:'#4C6FA2'
                        }
                    } 
                },
                series: [
                    {
                        //name: 'UV',
                        type: 'line',
                        data: state.series_data
                    }
                ]
            });
        }

        return{
            ...toRefs(state),
            setTab
        }
    }
}
</script>

<style lang="scss" scoped>
    .chartBox{
        display: flex;
        width: 100%;
        height: 100%;
        flex-flow: column;
        font-family: Inter-Semi Bold, Inter;
        font-weight: normal;
        line-height: normal;
        .jlffqs{
            flex: 1;
            width: 100%;
            height: 100%;
            margin: 0;
        }
        .tabBox{
                height: 60px;
                line-height: 60px;
                padding: 0;
                text-align: center;
                font-family: Poppins-Medium, Poppins;
                font-weight: 500;
                color: #fff;
                font-size: 22px;
                span{
                    //flex: 1;
                    display: inline-block;
                    color: rgba(103,248,255,0.3000);
                    font-weight: bold;
                    text-align: center;
                    position: relative;
                    z-index: 10;
                    &::after{
                        content: '';
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 150px;
                        height: 4px;
                        margin: 0 0 0 50%;
                        transform: translate(-50%,0);
                        -webkit-transform: translate(-50%,0);
                    }
                    &+span{
                        margin-left: 30px;
                    }
                    &.selected{
                        color: #67F8FF;
                        &::after{
                            background:#67F8FF;
                        }
                    }
                }
            }
    }
</style>